<template>
  <div>
    <ul>
      <li v-for="(singer, index) in displayedSingers" :key="index" @click="goToSingerDetail(singer.artist_id)">
        --{{index + 1}}.{{ singer.name }} ———— 热度：{{ singer.value }}
      </li>
    </ul>
    <div class="refresh-text" @click="refreshSingers">不感兴趣？换一批</div>
  </div>
</template>

<script>
export default {
  name: 'RandomSingerList',
  data() {
    return {
      singers:[
        { artist_id: 373260,value: 9385032, name: 'Thomas Bergersen, Two Steps from Hell' },
        { artist_id: 281542,value: 7882613, name: 'The Prodigy & Tom Morello' },
        { artist_id: 56683,value: 6972108, name: 'Bowie' },
        { artist_id: 31359,value: 6308502, name: 'Glee Cast' },
        { artist_id: 276125,value: 6294210, name: 'Pink Floyd & Floyd' },
        { artist_id: 429274,value: 5651291, name: 'Håkan Hellström & Göteborgs Symfoniker' },
        { artist_id: 447098,value: 5469251, name: 'Kanye west ft. frank ocean' },
        { artist_id: 82955,value: 5278644, name: 'Coldplay & Kylie Minogue' },
        { artist_id: 139394,value: 5195185, name: 'Eminem feat. Nate Dogg' },
        { artist_id: 201108,value: 5137666, name: 'Linkin Park & Jay-Z (Live Clean)' },
        { artist_id: 124222,value: 5010090, name: 'Queen & The Muppets' },
        { artist_id: 240017,value: 4996816, name: 'The Mountain Goats' },
        { artist_id: 200082,value: 4961804, name: 'Lil Wayne Feat. Drake & Rick Ross' },
        { artist_id: 5399,value: 4926236, name: 'deadmau5 & Kaskade' },
        { artist_id: 403590,value: 4858824, name: 'Wiz Khalifa & John Cena' },
        { artist_id: 72167,value: 4855250, name: 'Ceremony' },
        { artist_id: 211094,value: 4822351, name: 'Mac Miller feat. Action Bronson' },
        { artist_id: 185344,value: 4714660, name: 'K.I.Z' },
        { artist_id: 76474,value: 4656963, name: 'Frederic Chopin & André Laplante' },
        { artist_id: 110337,value: 4573013, name: 'Depehce Mode' }
      ] ,
      displayedSingers: []
    };
  },
  methods: {
    refreshSingers() {
      const randomIndexes = this.getRandomIndexes(8);
      this.displayedSingers = randomIndexes.map(index => this.singers[index]);
    },
    getRandomIndexes(count) {
      const indexes = [];
      const allIndexes = Array.from({ length: this.singers.length }, (_, i) => i);
      for (let i = 0; i < count; i++) {
        const randomIndex = Math.floor(Math.random() * allIndexes.length);
        indexes.push(allIndexes.splice(randomIndex, 1)[0]);
      }
      return indexes;
    },
    goToSingerDetail(singerId) {
      this.$router.push({path: `/person-detail/${singerId}`});
    }
  },
  mounted() {
    this.refreshSingers();
  }
};
</script>

<style scoped>
h2 {
  font-family: Arial, sans-serif;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  font-size: large;
  margin: 10px 0;
  cursor: pointer;
}
li:hover {
  text-decoration: underline;
}

.refresh-text {
  cursor: pointer;
  margin-top: 0px;
  padding: 20px;
  font-size: 16px;
  color: #007bff;
  text-decoration: underline;
}

.refresh-text:hover {
  text-decoration: none;
  color: #0056b3;
}
</style>
